<!--
 * @Author: wangkg wangkegui@longfor.com
 * @Date: 2024-05-09 17:53:06
 * @Description: 
-->
<template>
  <div :class="[prefixCls]" v-loading="isPageLoading" ref="content">
    <PageLayout />
    <el-backtop v-if="isUseOpenBackTop" :target="'.' + prefixCls" />
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';

import PageLayout from '@/layouts/page/index.vue';
import { getGlobalCls } from '@/utils/index';
import { useAppStore } from '@/store/modules/app';

defineOptions({ name: 'LayoutContent' });
const appStore = useAppStore();

const { prefixCls } = getGlobalCls('container-main__content');

const isPageLoading = computed(() => appStore.getPageLoading);
const isUseOpenBackTop = computed(() => appStore.getProjectConfig.useOpenBackTop);
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-container-main__content;

.#{$prefix-cls} {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  overflow: auto;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;

    &-loading {
      position: absolute;
      z-index: config.$page-loading-z-index;
      top: 200px;
    }
  }
</style>
